<template>
    <div class="custom-list">
        <div class="custom-list__header">
            <span class="search-res" v-render="{keyword,content:props.searchRes}"></span>
        </div>
        <div class="custom-list__body">
            <div class="card" v-for="(data, $index) in props.list" :key="data.id">
                <div class="column" v-for="item in props.columns">
                    <template v-if="item.type == 'header'">
                        <div class="card-item">
                            <span class="goods-no" v-html="data[item.list[0].prop]"></span>
                            <span class="title" v-html="data[item.list[1].prop]"></span>
                        </div>
                    </template>
                    <template v-else-if="item.type == 'tag'">
                        <slot :name="item.slot" v-if="item.slot" :row="data" :item="item" :index="$index"></slot>
                        <div class="card-item" v-for="tagName in data[item.prop]">
                            <el-tooltip  content="Top Left prompts info" placement="top">
                                <el-button plain type="primary" class="tag" v-html="tagName"></el-button>
                            </el-tooltip>
                        </div>
                    </template>
                    <template v-else-if="item.type == 'category'">
                        <slot :name="item.slot" v-if="item.slot" :row="data" :item="item" :index="$index"></slot>
                        <div class="card-item" v-else>
                            <div class="child-item">
                                <span class="label" v-html="item.list[0].label"></span>
                                <span class="text" v-html="data[item.list[0].prop]"></span>
                            </div>
                            <div class="child-item">
                                <span class="label" v-html="item.list[1].label"></span>
                                <span class="text" v-html="data[item.list[1].prop]"></span>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="item.type == 'categorys'">
                        <slot :name="item.slot" v-if="item.slot" :row="data" :item="item" :index="$index"></slot>
                        <div class="card-item" v-else>
                            <div class="child-item">
                                <span class="label" v-html="item.list[0].label"></span>
                                <span class="text" v-html="data[item.list[0].prop]"></span>
                            </div>
                            <div class="child-item">
                                <span class="label" v-html="item.list[1].label"></span>
                                <span class="text" v-html="data[item.list[1].prop]"></span>
                            </div>
                            <div class="child-item">
                                <span class="label" v-html="item.list[2].label"></span>
                                <span class="text" v-html="data[item.list[2].prop]"></span>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="item.type == 'tips'">
                        <slot :name="item.slot" v-if="item.slot" :row="data" :item="item" :index="$index"></slot>
                        <div class="card-item tips-tag" v-else>
                            <div class="child-item vw-100">
                                <span class="label">所顾类目:</span>
                                <span class="text">第二焚 植物产品第二焚 </span>
                                <span>更多>></span>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <slot :name="item.slot" v-if="item.slot" :row="data" :item="item" :index="$index"></slot>
                        <div class="card-item" v-else>
                            <div class="child-item vw-100 txt-ellipsis">
                                <span class="label" v-html="item.label"></span>
                                <span class="text" v-html="data[item.prop]"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts" name="CustomList">
const props = withDefaults(
    defineProps<{
        list?: any[];
        columns?: any[];
        keyword?: string;
        searchRes?:string,
    }>(),
    {
        list: () => [],
        columns: () => [],
        keyword: "",
        searchRes: ""
    }
);
</script>
<style lang="scss" scoped>
.custom-list {
    width: 100%;
    height: 100%;

    padding: 0 10px;

    &__header {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #f0efef;

        .search-res {
            font-size: 12px;
            color: #333333;
        }
    }

    &__body {

        // overflow-y: auto;
        .card {
            padding: 10px 0;
            width: 100%;
            // height: 100px;
            border-bottom: 1px solid #f0efef;

            .column {
                width: 100%;
                height: auto;
                display: flex;
            }

            .card-item {
                padding: 3px 0;
                display: flex;
                flex-direction: row;
                align-items: center;
                flex-wrap: wrap;

                .goods-no {
                    margin-right: 10px;
                }

                .tag {
                    margin-right: 5px;
                }

                .child-item {
                    width: 160px;
                    font-size: 8px;

                    .label {
                        color: #858484;
                    }

                    .text {
                        padding-left: 5px;
                    }
                }
            }

            .tips-tag {
                background: rgb(255, 211, 198);
                border-radius: 3px;
                padding: 2px 10px;
                width: 100%;

                .child-item {
                    .label {
                        color: rgb(252, 115, 18);
                    }
                }
            }
        }
    }

    .txt-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .vw-100 {
        width: 100%;
    }

    .color-blue {
        color: #0b8fee;
    }
}
</style>
